<template>
    <div class="dual-chart-container">
        <div class="chart-wrapper">
            <h4>重量统计(KG)</h4>
            <div class="e-h-400" ref="weightChart"></div>
        </div>
        <div class="chart-wrapper">
            <h4>数量统计(件)</h4>
            <div class="e-h-400" ref="quantityChart"></div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        props: {
            data: { type: Array, default: () => [] }
        },
        mounted() {
            this.initCharts()
        },
        methods: {
            initCharts() {
                // 分离数据
                const weightData = this.data.filter(item => item.isweighing)
                const quantityData = this.data.filter(item => !item.isweighing)

                // 初始化重量图表
                this.initChart('weightChart', {
                    title: '重量统计',
                    data: weightData,
                    unit: 'KG',
                    color: '#36a3eb',
                    formatter: value => `${value} KG`
                })

                // 初始化数量图表
                this.initChart('quantityChart', {
                    title: '数量统计',
                    data: quantityData,
                    unit: '件',
                    color: '#34bfa3',
                    formatter: value => `${value} 件`
                })
            },
            initChart(refName, config) {
                const chartDom = this.$refs[refName]
                const myChart = echarts.init(chartDom)

                const categories = config.data.map(item => item.name)
                const values = config.data.map(item => item.weight)

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: params => {
                            const item = params[0]
                            return `${item.name}<br/>${item.marker} ${item.seriesName}: ${item.value}${config.unit}`
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: categories,
                        axisLabel: { rotate: 0 }
                    },
                    yAxis: {
                        type: 'value',
                        // name: config.unit,
                        axisLabel: { formatter: config.formatter }
                    },
                    series: [{
                        name: config.title,
                        type: 'bar',
                        data: values,
                        itemStyle: { color: config.color },
                        emphasis: { focus: 'series' }
                    }]
                }

                myChart.setOption(option)
                window.addEventListener('resize', () => myChart.resize())
            }
        }
    }
</script>

<style>
    .dual-chart-container {
        display: flex;
        gap: 20px;
    }

    .chart-wrapper {
        flex: 1;
        border: 1px solid var(--border-light);
        padding: 15px;
        /* border-radius: 8px; */
    }

    .chart-wrapper h4 {
        text-align: center;
        margin: 10px 0 0;
        color: var(--secondary);
    }
</style>